<template>
  <div class="collect">
    <h3>我的收藏</h3>
    <div class="pduan">共收藏了{{ datalist.length }}篇菜谱</div>
    <div v-if="issuelist.length == 0">
      <van-empty description="描述文字" />
    </div>
    <div class="issue" v-if="issuelist.length != 0">
      <div class="issuelist" v-for="(item, index) in datalist" :key="index">
        <div class="issue_left" @click="gocaipu(item.cook_id)">
          <img class="aout_img" :src="item.photo_path" alt="" />
        </div>
        <div class="issue_right">
          <div class="title">{{ item.title }}</div>
          <div class="ppp">{{ item.views_count_text }}万人看过</div>
          <div class="yon">
            <div class="yimg">
              <img class="aout_img" :src="item.user.user_photo" alt="" />
            </div>
            <div class="ytitle">{{ item.user.nick }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Collect",
  data() {
    return {
      issuelist: [],
      datalist: [],
    };
  },
  methods: {
    getcollect() {
      let getcollectdata = JSON.parse(localStorage.getItem("collectlist"));
      if (!getcollectdata) {
        this.issuelist = [];
      } else {
        getcollectdata.forEach((element) => {
          this.issuelist.push(element);
        });
        // 获取收藏的数据额列表
        this.issuelist.forEach((ele, index) => {
          this.axios({
            method: "get",
            url: `/recipe/detail/${ele}`,
          })
            .then((result) => {
              // console.log(result.data.result.recipe);
              this.datalist.push(result.data.result.recipe);
            })
            .catch((err) => {
              console.log(err);
            });
        });
        // console.log(this.datalist);
      }
    },
    gocaipu(id) {
      this.$router.push({ name: "menu", params: { id } });
    },
  },
  created() {
    this.getcollect();
  },
};
</script>

<style lang="less" scoped>
.collect {
  width: 100%;
  height: 100%;
  h3 {
    margin-left: 20px;
  }
  .pduan {
    width: 90%;
    padding: 5px 5%;
  }
  .issue {
    width: 100%;
    height: 100%;
  }
  .issuelist {
    width: 90%;
    height: 100px;
    padding: 10px 5%;
    display: flex;
    justify-content: space-between;
    .issue_left {
      width: 45%;
      height: 100%;
      border: 1px solid #ccc;
    }
    .issue_right {
      width: 50%;
      height: 100%;
      .title {
        font-size: 0.4rem;
        font-weight: bold;
        margin: 20px 0 10px 0;
      }
      .yon {
        margin: 10px 0 5px 0;
        .yimg {
          float: left;
          width: 15px;
          height: 15px;
          border-radius: 50%;
          border: 1px solid #ccc;
          overflow: hidden;
        }
        .ytitle {
          margin-left: 10px;
          float: left;
        }
      }
    }
  }
}
.aout_img {
  width: 100%;
  height: 100%;
  display: block;
}
</style>